<template>
  <div>
    <el-form
      ref="addForm"
      :model="dictItem"
      :rules="rules"
      label-width="100px"
    >
      <el-form-item :label="$t('dictItemList.itemText')" prop="itemText">
        <el-input v-model="dictItem.itemText" />
      </el-form-item>
      <el-form-item :label="$t('dictItemList.itemValue')" prop="itemValue">
        <el-input v-model="dictItem.itemValue" />
      </el-form-item>
      <el-form-item :label="$t('dictItemList.tenantId')" prop="tenantId">
        <el-input v-model="dictItem.tenantId" disabled />
      </el-form-item>

      <el-form-item :label="$t('dictItemList.validState')">
        <el-switch
          v-model="dictItem.validState"
          :active-value="1"
          :inactive-value="0"
          :active-text="$t('dictItemList.status1')"
          :inactive-text="$t('dictItemList.status0')"
        />
      </el-form-item>

      <el-form-item :label="$t('dictItemList.remark')">
        <el-input v-model="dictItem.remark" type="textarea" :autosize="{minRows: 4, maxRows:10}" /></el-form-item>
      <el-form-item>
        <el-button :loading="loading" type="primary" @click="onSubmit"> {{ $t('table.confirm') }}</el-button>
        <el-button @click="onCancel"> {{ $t('table.cancel') }}</el-button>
      </el-form-item>

    </el-form>
  </div>
</template>
<script>

import { insertOrUpdateDictItem } from '@/api/dictItem'
// import deepClone from 'clone-deep'
import store from '@/store'

export default {
  name: 'AddForm',

  props: {
    dictId: {
      type: Number,
      require: true,
      default: null
    }
  },
  data() {
    return {
      dictItem: {
        dictId: this.dictId,
        itemText: null,
        itemValue: null,
        remark: null,
        tenantId: store.getters.tenantId,
        validState: 1
      },
      loading: false,
      rules: {
        itemText: [
          { required: true, message: '请输入名称', trigger: 'blur' },
          { min: 1, message: '长度最少为1个字符', trigger: 'blur' }
        ],
        itemValue: [
          { required: true, message: '请输入数据值', trigger: 'blur' },
          { min: 1, message: '长度最少为1个字符', trigger: 'blur' }
        ],
        tenantId: [
          { required: true, message: '请输入租户编号', trigger: 'blur' },
          { min: 1, message: '长度最少为1个字符', trigger: 'blur' }
        ]

      }
    }
  },
  computed: {

  },
  watch: {

  },
  mounted() {

  },
  created() {

  },
  methods: {

    onSubmit() {
      const _this = this
      _this.loading = true
      _this.$refs['addForm'].validate((valid) => {
        if (valid) {
          const postData = _this.dictItem
          insertOrUpdateDictItem(postData).then(response => {
            _this.$message.success('保存成功!')
            _this.$nextTick(() => {
              _this.loading = false
            })
            _this.$emit('close')
            _this.$emit('queryList')
          })
        } else {
          _this.$nextTick(() => {
            _this.loading = false
          })
          return
        }
      })
      this.$nextTick(() => {
        _this.loading = false
      })
    },
    onCancel() {
      const _this = this

      _this.$emit('close')
    }
  }
}
</script>

<style scoped>
.el-form-item label:after {
        content: "";
        display: inline-block;
        width: 100%;
    }

    .el-form-item__label {
        text-align: justify;
        height: 50px;
    }

    .el-form-item.is-required .el-form-item__label:before {
        content: none !important;
    }
.el-drawer:focus {
    outline: none;
}

</style>
